<template>
  <van-skeleton title :row="3" style="margin-top:10px;" :loading="loading">
    <div>
      <div class="ha">
        <van-nav-bar title="供应商详情" fixed="true" left-arrow @click-left="bank" />
      </div>
      <div class="exam-container">
        <van-tag>供应商</van-tag>
        <strong>&nbsp;{{ supplier.name }}</strong>
        <p>
          经营种类
          <van-tag type="primary" class="type" v-if="supplier.type==null">null</van-tag>
          <span type="primary" class="type" v-else-if="supplier.type.length>5">...</span>
          <van-tag type="primary" class="type" v-else>{{ supplier.type }}</van-tag>
        </p>
        <p v-if="supplier.address==null">地址:null</p>
        <p v-else>地址:{{ supplier.address }}</p>
        <van-image class="img" width="100" height="90" :src="supplier.logo"></van-image>
      </div>
      <div class="hr"></div>
      <div class="good">
        <div>
          <van-sidebar v-model="active" class="cls">
            <div v-for="(item) in goods" :key="item" @click="onChange(item.goods)">
              <van-sidebar-item :title="item.name" :badge="item.count" />
            </div>
          </van-sidebar>
        </div>

        <div v-if="active === active && good.length != 0">
          <div v-for="it in good" :key="it">
            <div class="gd">
              <van-row>
                <van-col span="24">
                  <van-image
                    style="float: left;"
                    width="80"
                    height="80"
                    radius="5px"
                    :src="it.photo"
                    @click="handleDetail(it)"
                  ></van-image>
                  <p class="name">{{ it.name }}</p>
                  <p class="specs">{{ it.specs }}</p>
                  <p class="xiao">销量：{{ it.sales }}，库存：{{ it.inventory - it.sales }}</p>
                  <div>
                    <p class="price" v-if="it.isPromote!=1">
                      ￥{{ it.price }}
                      <span class="fen">/份</span>
                    </p>
                    <del class="prices" v-else>
                      ￥{{ it.price }}
                      <span class="fen">/份</span>
                    </del>
                    <span style="font-size: 16px; color:red;" v-if="it.isPromote==1">
                      ￥{{ it.promotePrice }}
                      <span class="fen">/份</span>
                    </span>
                  </div>
                  <div class="car-button">
                    <div class="btn-reduce" v-if="it.carCount > 0" @click="reduce(it)">-</div>
                    <div class="btn-number" v-if="it.carCount > 0">{{ it.carCount }}</div>
                    <div class="btn-add" @click="add(it)">+</div>
                  </div>
                </van-col>
              </van-row>
              <div class="hr"></div>
            </div>
          </div>
        </div>
        <div v-else style="margin: auto;">没数据</div>
      </div>
      <!-- 购物车start -->
      <div class="car">
        <van-row>
          <van-col span="8">
            <van-icon name="cart-o" size="20px" @click="goCar" :badge="cars.total" />
          </van-col>
          <van-col span="10">
            <div class="car-price" style="font-size:12px;">
              合计:
              <b class="car-sum">¥{{ cars.sum }}</b>
            </div>
          </van-col>
          <van-col span="6">
            <div class="car-go" @click="goCar">去结算</div>
          </van-col>
        </van-row>
      </div>
      <!-- 购物车end -->
    </div>
  </van-skeleton>
</template>

<script>
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { getTypesAndGoods } from "../../api/goods";
import { showToast } from "vant";
export default {
  setup() {
    const router = useRouter();
    const data = reactive({
      id: "",
      goods: [],
      supplier: [],
      active: 0,
      loading: true,
      good: [],
      cars: {
        sum: 0,
        total: 0,
        data: []
      }
    });
    data.id = router.currentRoute.value.params.id;

    const events = {
      handleDetail(val){
        router.push("/shoppdetail/" + val.id);
      },
      goCar() {
        if (data.cars.total === 0) {
          showToast("购物车是空的");
          return;
        }
        router.push("/car");
      },
      bank() {
        router.push("/");
      },
      add(val) {
        let inventory = val.inventory - val.sales;
        if (val.carCount >= inventory) {
          showToast("库存不足");
          return;
        }

        let car = data.cars.data.find(d => d.id == val.id);
        if (car === undefined) {
          val.carCount = 1;
          data.cars.data.push(val);
        } else {
          val.carCount++;
        }
        data.cars.total++;
        data.cars.sum +=
          Math.round(
            (val.isPromote === 1 ? val.promotePrice : val.price) * 100
          ) / 100; //总价
        data.cars.sum = Math.round(data.cars.sum * 100) / 100;

        localStorage.setItem("cart", JSON.stringify(data.cars));
      },
      reduce(val) {
        let car = data.cars.data.find(d => d.id == val.id);
        if (car.carCount <= 1) {
          for (let i = 0; i < data.cars.data.length; i++) {
            if (data.cars.data[i].id === car.id) {
              data.cars.data.carCount -= 1;
              data.cars.data.splice(i, 1);
              break;
            }
          }
        }
        val.carCount--;
        data.cars.total--;
        car.carCount = val.carCount;
        data.cars.sum -=
          Math.round(
            (val.isPromote === 1 ? val.promotePrice : val.price) * 100
          ) / 100; //总价
        data.cars.sum = Math.round(data.cars.sum * 100) / 100;
        localStorage.setItem("cart", JSON.stringify(data.cars));
      },
      onChange(index) {
        data.good = index;
        data.good.forEach(d => {
          let carss = data.cars.data.find(e => e.id == d.id);
          if (carss != undefined) {
            d.carCount = carss.carCount;
          }
        });
      }
    };

    onMounted(() => {
      if (localStorage.getItem("cart") != null) {
        data.cars = JSON.parse(localStorage.getItem("cart"));
      }
      getTypesAndGoods({
        sid: data.id
      }).then(res => {
        if (res.result === 0) {
          data.goods = res.data.data;
          data.supplier = res.data.supplier;
          data.loading = false;
          if (res.data.data == null || res.data.data.length == 0) {
            data.good = 0;
          } else {
            data.good = res.data.data[0].goods;
            data.good.forEach(d => {
              let carss = data.cars.data.find(e => e.id == d.id);
              if (carss != undefined) {
                d.carCount = carss.carCount;
              }
            });
          }
        }
      });
    });

    return {
      ...toRefs(data),
      ...events
    };
  }
};
</script>

<style scoped>
.car-price {
  width: 100%;
  background: linear-gradient(to right, #ee832b, #e97f07);
  height: 35px;
  text-align: center;
}

.car-go {
  padding-left: 2px;
  background: linear-gradient(to right, #f05023, #f04313);
  width: 100%;
  text-align: center;
  border-top-right-radius: 17px;
  border-bottom-right-radius: 17px;
  font-weight: bold;
}

.car-sum {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin-left: 5px;
}

.car {
  width: calc(100% - 50px);
  background: linear-gradient(to right, #e97f07, #ee832b);
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 12px;
  color: #fff;
  height: 35px;
  line-height: 35px;
  border-radius: 35px;
  padding-left: 20px;
}
.ha {
  /* height: calc(100vh - 100px); */
  overflow: auto;
  line-height: 50px;
  /* margin-top: 50px; */
  height: 50px;
}

.btn-number {
  margin-left: 10px;
  margin-right: 10px;
  text-align: center;
  font-size: 15px;
  margin-top: -13px;
}

.car-button {
  float: right;
  margin-right: 10px;
  display: flex;
  z-index: 999;
}

.btn-add {
  width: 1.1rem;
  height: 1.1rem;
  text-align: center;
  line-height: 1.1rem;
  background-color: red;
  color: #fff;
  border-radius: 20px;
  font-weight: bold;
  margin-top: -13px;
}

.btn-reduce {
  width: 18px;
  height: 18px;
  background-color: red;
  color: #fff;
  text-align: center;
  line-height: 15px;
  border-radius: 20px;
  font-weight: bold;
  margin-top: -13px;
}

.fen {
  color: #000;
}
.prices {
  margin-left: 15px;
  color: red;
  font-size: 16px;
  width: 140px;
}

.price {
  margin: 3px 0 0 94px;
  color: red;
  font-size: 16px;
  width: 140px;
}

.xiao {
  margin: 3px 0 0 95px;
}

.specs {
  font-size: 13px;
  margin: 3px 0 0 95px;
}

.name {
  color: #000;
  font-weight: bold;
  font-size: 18px;
  margin: 0 0 0 95px;
}

.gd {
  padding-left: 15px;
  width: calc(100vw - 95px);
}

.good {
  display: flex;
  padding-bottom: 70px;
}

.hr {
  border-top: 1px solid #eee;
  /* 设置顶部边框，可以调整宽度、样式和颜色 */
  height: 0;
  /* 高度设置为0，使得元素看上去像一条线 */
  margin: 10px 0;
  /* 设置上下外边距，可以调整 */
}

.img {
  float: right;
  position: relative;
  bottom: 90px;
}

p {
  font-size: 12px;
  color: #909090;
  margin: 12px 0 12px 25px;
}

.type {
  font-size: 15px;
  margin-left: 5px;
}

.exam-container {
  margin: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding: 10px;
  border-radius: 2px;
}

.cls {
  background-color: var(--van-sidebar-background, yellow);
  --van-sidebar-selected-border-height: 100%;
  --van-sidebar-selected-border-color: var(--van-danger-color);
  /**字体颜色 */
}
</style>